<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/order_z.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>order</title>
</head>
<body>
    <div class="title">
        <img onclick="back()" class="bg1" src="./img/z_back.png" alt="返回">
        <p class="txt1">全部订单</p>
        <span class="icon1" onclick="put()"></span>
        <div class="types" style="display: none;">
            <div class="typesItem" onclick="changeTitle(this)">全部订单</div>
            <div class="typesItem" onclick="changeTitle(this)">旅游订单</div>
            <div class="typesItem" onclick="changeTitle(this)">集市订单</div>
            <div class="typesItem" onclick="changeTitle(this)">户外卡订单</div>
            <div class="typesItem" onclick="changeTitle(this)">签证订单</div>
            <div class="typesItem" onclick="changeTitle(this)">房券订单</div>
            <div class="typesItem" onclick="changeTitle(this)">线路预售券订单</div>
            <div class="typesItem" onclick="changeTitle(this)">优惠券订单</div>
            <div class="typesItem" onclick="changeTitle(this)">城市坐标订单</div>
        </div>
    </div>
    <div class="orderList">
        <p>全部</p>
        <p>待确认</p>
        <p>待付款</p>
        <p>已付款</p>
        <p>待评价</p>
        <p>退款/售后</p>
    </div>
    <div class="orderNew">
        <img class="bg2" src="./img/z_empty.png" alt="空订单提示">
        <p>这里什么也没有</p>
        <p>继续去探索未知的新世界吧</p>
    </div>
    <div class="bottom">
        <div class="one" onclick="switchTab(this)">
            <div class="tab-img-container">
                <img class="bg3 default" src="./img/z_shouye2.png" alt="" style="display: block;">
                <img class="bg3 active" src="./img/z_shouye1.png" alt="" style="display: none;">
            </div>
            <p onclick="index()">首页</p>
        </div>
        <div class="one1" onclick="handleOrderClick(this)">
            <div class="tab-img-container">
                <img class="bg3 default" src="./img/z_dngdan1.png" alt="" style="display: none;">
                <img class="bg3 active" src="./img/z_dingdan2.png" alt="" style="display: block;">
            </div>
            <p onclick="order()">订单</p>
        </div>
        <div class="one2" onclick="switchTab(this)">
            <div onclick="personal()" class="tab-img-container">
                <img class="bg3 default" src="./img/z_geren1.png" alt="" style="display: block;">
                <img class="bg3 active" src="./img/z_geren2.png" alt="" style="display: none;">
            </div>
            <p>个人中心</p>
        </div>
    </div>
</body>
<script src="./js/reset.js"></script>
<script>
    const types = document.querySelector('.types');
    const typesItems = document.querySelectorAll('.typesItem');
    const titleText = document.querySelector('.txt1');
    const bottomTabs = document.querySelectorAll('.bottom > div'); 
    
    function put() {
        types.style.display = types.style.display === 'block' ? 'none' : 'block';
    }
    
    function changeTitle(element) {
        titleText.textContent = element.textContent;
        types.style.display = 'none';
        typesItems.forEach(item => {
            item.style.backgroundColor = '';
        });
        element.style.backgroundColor = '#fff100';
    }
    
    function switchTab(selectedTab) {
        bottomTabs.forEach(tab => {
            const defaultImg = tab.querySelector('.default'); 
            const activeImg = tab.querySelector('.active'); 
            if (defaultImg && activeImg) {
                defaultImg.style.display = 'block';
                activeImg.style.display = 'none';
            }
            tab.classList.remove('active');
        });
        const selectedDefaultImg = selectedTab.querySelector('.default');
        const selectedActiveImg = selectedTab.querySelector('.active');
        if (selectedDefaultImg && selectedActiveImg) {
            selectedDefaultImg.style.display = 'none';
            selectedActiveImg.style.display = 'block';
        }
        selectedTab.classList.add('active');
    }
    document.querySelector('.typesItem').style.backgroundColor = '#fff100';
    function index(){
        window.location.href='Lindex.html';
    }
    function order(){
        window.location.href='order_z.html';
    }
    function personal(){
        window.location.href='personal.html';
    }
     function back(){
        window.location.href='Lindex.html';
    }
     
    function handleOrderClick(tabElement) {
       
        const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
        
        if (isLoggedIn) {
            
            if (tabElement) {
                switchTab(tabElement); 
            }
            window.location.href = 'order_z.html';
        } else {
            
            window.location.href = 'login.html';
        }
    }
    
    function personal(){
        window.location.href='personal.html';
    }
    
    function back(){
        window.location.href='Lindex.html';
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        
        const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
        
        if (!isLoggedIn) {
           
            localStorage.setItem('redirectUrl', window.location.href);
          
            window.location.href = 'login.html';
        }
    });
</script>
</html>